<!--  -->
<template>
    <div class="container_box">
      <el-container>
        <el-header>
          <div>
            <img src="../assets/卡卡西.jpg" alt="">
            <span>欢迎来到XX电商后台管理系统</span>
          </div>
          <el-button type="primary" @click = "open">退出</el-button>
        </el-header>
          <el-container>
            <el-aside width="200px">
              <div class="toggle_button">
                 |||
              </div>
              <el-menu  @open="handleOpen" 
                        @close="handleClose"
                        text-color="#fff"
                        background-color="#293749"
                        router
                        :default-active="activePath"
              >
                    <!-- 一级菜单 -->
                <el-submenu :index= "list.path" v-for="list in lists" :key = list.id>
                    <template slot="title"><i :class="idClass[list.id]"></i>{{list.authName}}</template>
                    <!-- 二级菜单 -->
                    <el-menu-item 
                      :index="item.path" 
                      v-for="item in list.children" 
                      :key = "item.id"
                      @click="saveNavState(item.path)"
                    >
                      <i class="el-icon-menu"></i>
                      {{item.authName}}
                    </el-menu-item>
                </el-submenu>  
              </el-menu>
            </el-aside>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
      </el-container>
    </div>
    
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  isCollapse: false,
  lists:[],
  idClass:{
    "125":"iconfont  icon-users",
    "103":"iconfont  icon-tijikongjian",
    "101":"iconfont icon-3702mima",
    "102":'iconfont icon-danju',
    "145":"iconfont icon-baobiao"
  },
  activePath:""
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    
    // 主页退出
    open() {
       this.$confirm('您确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已成功退出!'
          });
        // 退出之后的清除token操作以及跳转到登录页面
        // 清空token
        window.sessionStorage.clear("token");
        // 跳转登录页面
        this.$router.push({name:"login"});

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    handleOpen(key, keyPath) {
        // console.log(key, keyPath);
    },
      
    handleClose(key, keyPath) {
        // console.log(key, keyPath);
    },

    async getMenu(){
      const { data } = await this.$http({
        url:"menus"
      })
      // console.log(data);
      if (data.meta.status == 200) {
        this.lists = data.data;
      }
    },

    saveNavState(activePath){
      // console.log(activePath);
      window.sessionStorage.setItem("activePath",activePath);
    }

    
    
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getMenu();

},
//生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {
  this.activePath = window.sessionStorage.getItem("activePath");
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.container_box{
  height: 100%;
  .el-container{
    height: 100%;
    .el-header{
      background-color: #293749;
      display: flex;
      justify-content: space-between;
      padding-left: 0;
      align-items: center;
      div{
        display: flex;
        align-items: center;
        img{
          height: 60px;
          display: block;

        }
        span{
          color: #fff;
          font-size: 20px;
          margin-left: 30px;
        }
      }
    }
    .el-aside{
      background: #293749;
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }
      .el-menu{
        border-right: none;
      }
      .iconfont{
        margin-right: 5px;
      }
      .toggle_button{
        text-align: center;
        background: #4A5064;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        letter-spacing: 0.2em;
        cursor: pointer;
      }
    }
  }
}

</style>